<!-- directive:title uib-progressbar -->
<!-- directive:breadcrumb uib-progressbar -->
<div class='panel-body'>
    <div class="alert alert-warning">
        <strong>Warning!</strong> 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性
    </div>
    <div class="block20"></div>
    <div class="row">
        <div class="col-sm-6">
            <h6><kbd>举例</kbd></h6>
            <div class="panel panel-default">
                <div class="panel-heading"> <span class="icon"> <i class="glyphicon glyphicon-list"></i> </span> <h5>进度条</h5> </div>
                <div class="panel-body">
                    <p>默认样式的进度条</p>
                    <div class="progress"> <div class="progress-bar " style="width: 0%"> <div class="sr-only">0%</div> </div> </div>
                    <div class="progress"> <div class="progress-bar " style="width: 20%"> <div class="sr-only">20%</div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 40%"> <div class="sr-only">40%</div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%"> <div class="sr-only">60%</div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 80%"> <div class="sr-only">80%</div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 100%"> <div class="sr-only">100%</div> </div> </div>
                    <hr />
                    <p>将设置了 <code>.sr-only</code> 类的 <code>&lt;span&gt;</code> 标签从进度条组件中移除，从而让当前进度显示出来。</p>
                    <div class="progress"> <div class="progress-bar " style="width: 0%"> 0% </div> </div>
                    <div class="progress"> <div class="progress-bar " style="width: 20%"> 20% </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 40%"> 40% </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%"> 60% </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 80%"> 80% </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 100%"> 100% </div> </div>
                    <hr />
                    <p>设置了 <code>.progress-with-value</code> 类的 <code>.progress</code> 文字居中阴影</p>
                    <div class="progress progress-with-value"> <div class="progress-bar " style="width: 0%"> </div> <span class="value-container"> <span class="value">0%</span> </div>
                    <div class="progress progress-with-value"> <div class="progress-bar " style="width: 20%"> </div> <span class="value-container"> <span class="value">20%</span> </div>
                    <div class="progress progress-with-value"> <div class="progress-bar progress-bar-info" style="width: 40%"> </div> <span class="value-container"> <span class="value">40%</span> </div>
                    <div class="progress progress-with-value"> <div class="progress-bar progress-bar-success" style="width: 60%"> </div> <span class="value-container"> <span class="value">60%</span> </div>
                    <div class="progress progress-with-value"> <div class="progress-bar progress-bar-warning" style="width: 80%"> </div> <span class="value-container"> <span class="value">80%</span> </div>
                    <div class="progress progress-with-value"> <div class="progress-bar progress-bar-danger" style="width: 100%"> </div> <span class="value-container"> <span class="value">100%</span> </div>
                    <hr />
                    <p>在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 <code>min-width</code> 属性。</p>
                    <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 0%;min-width: 2em;"> 0% </div> </div>
                    <hr />
                    <p>通过渐变可以为进度条创建条纹效果</p>
                    <div class="progress"> <div class="progress-bar progress-bar-striped" style="width: 20%"> <div class="sr-only"></div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-success" style="width: 40%"> <div class="sr-only"></div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 60%"> <div class="sr-only"></div> </div> </div>
                    <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 80%"> <div class="sr-only"></div> </div></div>
                    <hr />
                    <p>为 <code>.progress-bar-striped</code> 添加 <code>.active</code> 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。</p>
                    <div class="progress "> <div class="progress-bar active progress-bar-striped" style="width: 20%"> <div class="sr-only"></div> </div> </div>
                    <div class="progress "> <div class="progress-bar active progress-bar-striped progress-bar-success" style="width: 40%"> <div class="sr-only"></div> </div> </div>
                    <div class="progress "> <div class="progress-bar active progress-bar-striped progress-bar-warning" style="width: 60%"> <div class="sr-only"></div> </div> </div>
                    <div class="progress "> <div class="progress-bar active progress-bar-striped progress-bar-danger" style="width: 80%"> <div class="sr-only"></div> </div></div>
                    <hr />
                    <p>把多个进度条放入同一个 <code>.progress</code> 中，使它们呈现堆叠的效果。</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div>
                        <div class="progress-bar progress-bar-warning" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div>
                        <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div>
                    </div>
                    <hr />
                    <p>迷你进度条效果 <code>.progress-mini</code> </p>
                    <div>
                        <span class="glyphicon glyphicon-arrow-up"> 81% Clicks</span> <span class="pull-right strong">567</span>
                        <div class="progress progress-mini"> <div class="progress-bar active progress-bar-striped" style="width: 81%;"> <span class="sr-only">81% Complete</span> </div> </div>
                    </div>
                    <div>
                        <span class="glyphicon glyphicon-arrow-up text-success"> 72% Uniquie Clicks</span> <span class="pull-right strong">507</span>
                        <div class="progress progress-mini"> <div class="progress-bar active progress-bar-success progress-bar-striped" style="width: 72%;"> <span class="sr-only">72% Complete</span> </div> </div>
                    </div>
                    <div>
                        <span class="glyphicon glyphicon-arrow-down text-warning"> 53% Impressions</span> <span class="pull-right strong">457</span>
                        <div class="progress progress-mini"> <div class="progress-bar active progress-bar-warning progress-bar-striped" style="width: 53%;"> <span class="sr-only">53% Complete</span> </div> </div>
                    </div>
                    <div>
                        <span class="glyphicon glyphicon-arrow-up text-danger"> 3% Online Users</span> <span class="pull-right strong">8</span>
                        <div class="progress progress-mini"> <div class="progress-bar active progress-bar-danger progress-bar-striped" style="width: 3%;"> <span class="sr-only">3% Complete</span> </div> </div>
                    </div>
                    <div>
                        <span class="glyphicon glyphicon-arrow-up text-danger"> 90% Online Users</span> <span class="pull-right strong">98752</span>
                        <div class="progress progress-mini">
                            <div class="progress-bar progress-bar-striped active progress-bar-success" style="width: 35%;"></div>
                            <div class="progress-bar progress-bar-striped active progress-bar-warning" style="width: 20%;"></div>
                            <div class="progress-bar progress-bar-striped active progress-bar-danger" style="width: 10%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <script type="text/xianJs" ui-bs>
                <div class="progress"> <div class="progress-bar " style="width: 0%"> <div class="sr-only">0%</div> </div>
                </div>
                <div class="progress"> <div class="progress-bar " style="width: 20%"> <div class="sr-only">20%</div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 40%"> <div class="sr-only">40%</div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%"> <div class="sr-only">60%</div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 80%"> <div class="sr-only">80%</div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 100%"> <div class="sr-only">100%</div> </div>
                </div>
                <div class="progress"> <div class="progress-bar " style="width: 0%"> 0% </div>
                </div>
                <div class="progress"> <div class="progress-bar " style="width: 20%"> 20% </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 40%"> 40% </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%"> 60% </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 80%"> 80% </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 100%"> 100% </div>
                </div>
                <div class="progress progress-with-value"> <div class="progress-bar " style="width: 0%"> </div> <span class="value-container"> <span class="value">0%</span>
                </div>
                <div class="progress progress-with-value"> <div class="progress-bar " style="width: 20%"> </div> <span class="value-container"> <span class="value">20%</span>
                </div>
                <div class="progress progress-with-value"> <div class="progress-bar progress-bar-info" style="width: 40%"> </div> <span class="value-container"> <span class="value">40%</span>
                </div>
                <div class="progress progress-with-value"> <div class="progress-bar progress-bar-success" style="width: 60%"> </div> <span class="value-container"> <span class="value">60%</span>
                </div>
                <div class="progress progress-with-value"> <div class="progress-bar progress-bar-warning" style="width: 80%"> </div> <span class="value-container"> <span class="value">80%</span>
                </div>
                <div class="progress progress-with-value"> <div class="progress-bar progress-bar-danger" style="width: 100%"> </div> <span class="value-container"> <span class="value">100%</span>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 0%;min-width: 2em;"> 0% </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-striped" style="width: 20%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-success" style="width: 40%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 60%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 80%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress "> <div class="progress-bar active progress-bar-striped" style="width: 20%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress "> <div class="progress-bar active progress-bar-striped progress-bar-success" style="width: 40%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress "> <div class="progress-bar active progress-bar-striped progress-bar-warning" style="width: 60%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress "> <div class="progress-bar active progress-bar-striped progress-bar-danger" style="width: 80%"> <div class="sr-only"></div> </div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div>
                    <div class="progress-bar progress-bar-warning" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div>
                    <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div>
                </div>
                <div>
                    <span class="glyphicon glyphicon-arrow-up"> 81% Clicks</span> <span class="pull-right strong">567</span>
                    <div class="progress progress-mini"> <div class="progress-bar active progress-bar-striped" style="width: 81%;"> <span class="sr-only">81% Complete</span> </div> </div>
                </div>
                <div>
                    <span class="glyphicon glyphicon-arrow-up text-success"> 72% Uniquie Clicks</span> <span class="pull-right strong">507</span>
                    <div class="progress progress-mini"> <div class="progress-bar active progress-bar-success progress-bar-striped" style="width: 72%;"> <span class="sr-only">72% Complete</span> </div> </div>
                </div>
                <div>
                    <span class="glyphicon glyphicon-arrow-down text-warning"> 53% Impressions</span> <span class="pull-right strong">457</span>
                    <div class="progress progress-mini"> <div class="progress-bar active progress-bar-warning progress-bar-striped" style="width: 53%;"> <span class="sr-only">53% Complete</span> </div> </div>
                </div>
                <div>
                    <span class="glyphicon glyphicon-arrow-up text-danger"> 3% Online Users</span> <span class="pull-right strong">8</span>
                    <div class="progress progress-mini"> <div class="progress-bar active progress-bar-danger progress-bar-striped" style="width: 3%;"> <span class="sr-only">3% Complete</span> </div> </div>
                </div>
                <div>
                    <span class="glyphicon glyphicon-arrow-up text-danger"> 90% Online Users</span> <span class="pull-right strong">98752</span>
                    <div class="progress progress-mini">
                        <div class="progress-bar progress-bar-striped active progress-bar-success" style="width: 35%;"></div>
                        <div class="progress-bar progress-bar-striped active progress-bar-warning" style="width: 20%;"></div>
                        <div class="progress-bar progress-bar-striped active progress-bar-danger" style="width: 10%;"></div>
                    </div>
                </div>
            </script>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col-sm-4">
            <h6><kbd>举例</kbd></h6>
            <div class="panel panel-default">
                <div class="panel-heading"> <span class="icon"> <i class="glyphicon glyphicon-list"></i> </span> <h5>进度条</h5> </div>
                <div class="panel-body">
                    <span>The progress of development</span>
                    <div class="progress progress-mini">
                        <div class="progress-bar active progress-bar-success progress-bar-striped" style="width: 72%;"> <span class="sr-only">72% Complete</span> </div>
                    </div>
                    <div class="percent">20%</div>
                    <div class="stat">1956 / 10000 Line</div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <script type="text/xianJs" ui-bs>
                <span>The progress of development</span>
                <div class="progress"><div class="progress-bar progress-bar-mini progress-bar-danger active progress-bar-striped" style="width: 20%"></div></div>
                <div class="percent">20%</div>
                <div class="stat">1956 / 10000 Line</div>
            </script>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> 
            <ul class="nav nav-pills pull-right">
                <li><a href ng-click="random()">Random</a></li>
                <li><a href ng-click="randomStacked()">Stack</a></li>
            </ul>
            Progressbar
        </div>
        <div class='panel-body'>
            <uib-progressbar value="35" class="progress-xxs m-t-sm"></uib-progressbar>
            <uib-progressbar value="55" type="info" class="progress-xs"></uib-progressbar>
            <uib-progressbar value="22" type="success" class="progress-striped progress-xs"></uib-progressbar>
            <uib-progressbar value="90" type="warning" max="200" class="progress-striped active progress-xs m-b-sm"></uib-progressbar>
            <script type="text/xianjs" ui-bs>
                <uib-progressbar value="35" class="progress-xxs m-t-sm"></uib-progressbar>
                <uib-progressbar value="55" type="info" class="progress-xs"></uib-progressbar>
                <uib-progressbar value="22" type="success" class="progress-striped progress-xs"></uib-progressbar>
                <uib-progressbar value="90" type="warning" max="200" class="progress-striped active progress-xs m-b-sm"></uib-progressbar>
            </script>
            <uib-progressbar max="max" value="dynamic" type="info" class="progress-sm m-t-sm">
                <span style="white-space:nowrap;">{{dynamic}} / {{max}}</span>
            </uib-progressbar>
            <script type="text/xianjs" ui-bs>
                <uib-progressbar max="max" value="dynamic" type="info" class="progress-sm m-t-sm">
                    <span style="white-space:nowrap;">{{dynamic}} / {{max}}</span>
                </uib-progressbar>
            </script>
            <uib-progressbar animate="true" value="dynamic" type="success">
                <b>{{dynamic}}%</b>
            </uib-progressbar>
            <script type="text/xianjs" ui-bs>
                <uib-progressbar animate="true" value="dynamic" type="success">
                    <b>{{dynamic}}%</b>
                </uib-progressbar>
            </script>
            <uib-progressbar class="progress-striped active m-b-sm" value="dynamic" type="{{type}}">
                {{type}} <i ng-show="showWarning">!!! Watch out !!!</i>
            </uib-progressbar>
            <script type="text/xianjs" ui-bs>
                <uib-progressbar class="progress-striped active m-b-sm" value="dynamic" type="{{type}}">
                    {{type}} <i ng-show="showWarning">!!! Watch out !!!</i>
                </uib-progressbar>
            </script>
            <progress class="m-t-sm m-b-sm">
                <bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}">
                    <span ng-hide="bar.value < 5">{{bar.value}}%</span>
                </bar>
            </progress>
        </div>
    </div>
</div>
